<template>
    <el-dialog class="theme1" width="40%"
        :visible.sync="dialogOpen"
        @close="cancelBtnClicked"
        :close-on-click-modal="false"
    >
    <el-tabs type ='border-card' v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="pageMode === 'ADD' ? '新增' : pageMode === 'EDIT' ? '编辑' : '详情'"
                          name="first">
              <el-container direction="vertical">
                 <el-main style="height: 400px">
                    <el-form :model="formData" label-width="100px" ref="form" :disabled="editFlag ? false : true">
            <el-form-item label="名称">
              <el-input v-model="formData.name" class="input-common" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="formData.role" class="input-common" placeholder="请输入角色"></el-input>
            </el-form-item>
            <el-form-item label="部门">
              <el-input v-model="formData.depart" class="input-common" placeholder="请输入部门"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="formData.age" class="input-common" placeholder="请输入年龄"></el-input>
            </el-form-item>
                   </el-form>
                </el-main>
                <el-footer style="border-top: 1px solid #f5f7fa">
                    <el-button style="margin-left: 350px;margin-top: 20px; " @click="cancelBtnClicked">取 消</el-button>
                    <el-button type="primary" @click="okBtnClicked" :disabled="!editFlag">确 定</el-button>
                </el-footer>
            </el-container>
        </el-tab-pane>
    </el-tabs>
    </el-dialog>
</template>

<script>
    import ajax from '@api/ajax'
    export default {
        name: 'PcjAdhocTestForm',
        props: {
        dataSource: {
          type: Array,
          required: false
        }
        },
        data () {
            return {
                  activeName: 'first',
                  pageMode: 'ADD',
                  editFlag: false,
                  dialogOpen: false,
                  formData: {},
        validatorRules: {
        },
                url: {
                  add: "adhoc/pcjAdhocTest/add.do",
                  edit: "adhoc/pcjAdhocTest/edit.do"
                }
            }
        },
        created () {
        },
        methods: {
            add () {
                this.pageMode = 'ADD'
                this.dialogOpen = true
                this.editFlag = true
            },
            edit (record) {
                this.pageMode = 'EDIT'
                this.dialogOpen = true
                this.editFlag = true
                this.restoreStageData(record)
            },
            detail (record) {
                this.pageMode = 'DETAIL'
                this.dialogOpen = true
                this.editFlag = false
                this.restoreStageData(record)
            },
            restoreStageData (record) {
                this.formData= JSON.parse(JSON.stringify(record))
            },
            clearStageData () {
                this.formData = {}
                this.$refs.form.clearValidate()
            },
            cancelBtnClicked () {
                this.clearStageData()
                this.dialogOpen = false
            },
            okBtnClicked () {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                      let postUrl = null
                      if (this.pageMode === 'ADD') {
                          postUrl = this.url.add
                      } else if (this.pageMode === 'EDIT') {
                          postUrl = this.url.edit
                      }
                      ajax.post(postUrl, this.formData).then(res => {
                          this.dialogOpen = false
                          this.clearStageData()
                          if (this.pageMode === 'ADD') {
                              this.$emit('ok', 'ADD')
                          }
                          if (this.pageMode === 'EDIT') {
                              this.$emit('ok', 'EDIT')
                          }
                          this.$message.success('操作成功！')
                      }).catch(err => {
                          console.error('操作失败！', err)
                      })
                    } else {
                      return false
                    }
                })
            }

        }
    }

</script>
<style lang="stylus" rel="stylesheet/stylus">
    .theme1 {
        .el-dialog {
            background-color: rgba(0, 0, 0, 0);
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0);
        }
        .el-dialog__header {
            padding: 0;
        }
        .el-dialog__headerbtn {
            top: 10px;
            width :25px;
            background: url('~@img/icon/disable.png')  left no-repeat;
            background-size: 25px 25px
            z-index: 9999;
        .el-dialog__close {
            color: #000;
        }
        }
        .el-dialog__headerbtn i {
            content: '修改下面的font-size可以改变图片的大小';
            font-size: 5px;
            visibility: hidden;
        }

        .el-dialog__body {
            padding: 0;
        }

        .el-tabs--card > .el-tabs__header .el-tabs__nav {
            border: none;
        }

        .el-tabs__header {
            margin: 0;
        }

        .el-tabs__content {
            background-color: #fff;
            padding: 20px;
        }

        .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
            border-bottom: 1px solid transparent;
            background: #fff;
        }

        .el-tabs--card > .el-tabs__header .el-tabs__item {
            border-bottom: 1px solid #a3a7af;
            border-left: 1px solid #a3a7af;
            background: #ddd;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;

        &:first-child {
             border-left: 1px solid transparent;
         }
        }

        .el-tabs__item:focus.is-active.is-focus:not(:active) {
            box-shadow: none;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }
        }
</style>
